<html>
  <head> </head>
  <body>
    <h1>Example</h1>
    <pre class="mermaid">
      %%{init:{"theme":"base", "themeVariables": {"lineColor":"red"}}}%%
      flowchart LR
      subgraph red
      A --> B
      end
    </pre>
    <pre class="mermaid">
      %%{init:{"theme":"base", "themeVariables": {"lineColor":"blue"}}}%%
      flowchart LR
      subgraph black
      A --> B
      end
    </pre>
    <pre class="mermaid">
      ---
      config:
        theme: base
        themeVariables:
          lineColor: yellow
      ---
      flowchart LR
      subgraph red
      A --> B
      end
    </pre>
    <pre class="mermaid">
      ---
      config:
        theme: base
        themeVariables:
          lineColor: green
      ---
      flowchart LR
      subgraph black
      A --> B
      end
    </pre>
    <script type="module">
      import mermaid from './mermaid.esm.mjs';
      mermaid.initialize({ startOnLoad: false, logLevel: 0 });
      await mermaid.run();

      if (window.Cypress) {
        window.rendered = true;
      }
    </script>
  </body>
</html>
